<template>
	<view>
		<view class="fabu" @click="fabu" v-if="btnType == 'fabu'">
			<u-icon name="edit-pen-fill"></u-icon>
		</view>
		<view class="fabu2" @click="game" v-if="btnType == 'game'">
			<u-icon name="fabu" size="44" custom-prefix="iconfont"></u-icon>
		</view>
	<!-- 	<view class="hongb" @click="hongb" v-if="vuex_user.isAuth == '1'">
			<u-icon name="red-packet"></u-icon>
		</view> -->
		<u-popup v-model="slider" mode="bottom" border-radius="20" @close="cancel">
			<view class="content">
				<view class="btn-card" @click="dontai">
					<u-icon name="photo" color="#2979ff" size="44"></u-icon>
					<view class="btn-text">发布动态</view>
				</view>
				<view class="btn-card" @click="party" v-if="chat_flag == 1">
					<u-icon name="red-packet-fill" color="#eb92cd" size="44"></u-icon>
					<view class="btn-text">发布红包</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		props:{
			btnType: { // 当前tab的下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
				type: String,
				default(){
					return 'fabu'
				}
			},
		},
		data() {
			return {
				login: {
					appId: '',
					encryptedData: '',
					code: '',
					iv: ''
				},
				slider: false,
			}
		},
		computed: {
			...mapState(['vuex_user','chat_flag']),
		},
		methods: {
			fabu() {
				this.judgeLogin((res) => {
					this.$u.route({
						url: 'packgeMine/pages/me/publish',
					});
				});
			},
			game() {
				this.judgeLogin((res) => {
					this.$u.route({
						url: 'packgeMine/pages/game/publish',
						params: {
							my: 'true',
						}
					});
				});
			},
			dontai() {
				this.$u.route({
					url: 'pages/me/publish',
				});
			},
			hongb() {
				this.$store.commit('setCash', true);
				//uni.$emit('cash', true);
			},
			party() {
				this.$u.route({
					url: 'pages/me/party',
				});
			},
			cancel() { 
				this.slider = false;
			}, 
		}
	}
</script>

<style lang="scss" scoped>
	.fabu {
		background-color: #a569d9;
		position: fixed;
		bottom: 340rpx;
		right: 40rpx;
		border-radius: 100%;
		height: 80rpx;
		width: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #fff;
		z-index: 9999;
	}
	.fabu2 {
		background-color: lawngreen;
		position: fixed;
		bottom: 340rpx;
		right: 40rpx;
		border-radius: 100%;
		height: 80rpx;
		width: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #fff;
		z-index: 9999;
	}
	.hongb {
		background-color: #e62600;
		position: fixed;
		bottom: 540rpx;
		right: 40rpx;
		border-radius: 100%;
		height: 80rpx;
		width: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #fff;
		z-index: 9999;
		animation: btnScaleAni 3.5s infinite;
	}
	.content {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.btn-card {
		display: flex;
		height: 200rpx;
		width: 200rpx;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.btn-text {
		margin-top: 10px;
	}
	
	@keyframes btnScaleAni {
	  0%{ transform: scale(.85); opacity: .6; }
	  50%{ transform: scale(1); opacity: 1; }
	  100%{ transform: scale(.85); opacity: .6; }
	}
</style>
